<template>
  <el-row ref="radarWrap" class="radarWrap">
    <el-row class="radarHeader" type="flex" justify="space-between">
      <div class="title">{{ $store.getters.getLocation }}纳管终端简列</div>
    </el-row>
    <el-row type="flex">
      <div style="width: 30px;height: 3px;background-color: #ffffff"></div>
      <div style="width:100%;margin: 1px 0;height: 1px;background: rgba(255,255,255,0.1)"></div>
    </el-row>
    <el-row type="flex" justify="space-between" style="margin-top: 20px">
      <div>
        <el-row class="onlineTitle"><span class="el-icon-coin" style="padding-right: 10px"/>{{ $store.getters.getLocation }}纳管量</el-row>
        <el-row class="onlineNum"><span class="num">{{ total | parseToTenThousand }}</span><span v-if="total >= 10000 ">万</span>台</el-row>
      </div>
      <div>
        <el-row class="onlineTitle"><span class="el-icon-coin" style="padding-right: 10px"/>{{ $store.getters.getLocation }}在线量</el-row>
        <el-row class="onlineNum"><span class="num">{{ online | parseToTenThousand }}</span><span v-if="online >= 10000 ">万</span>台</el-row>
      </div>
    </el-row>
    <el-row class="radarHeader" type="flex" justify="space-between">
      <div class="title">{{ $store.getters.getLocation }}业务质量统计</div>
    </el-row>
    <el-row type="flex">
      <div style="width: 30px;height: 3px;background-color: #ffffff"></div>
      <div style="width:100%;margin: 1px 0;height: 1px;background: rgba(255,255,255,0.1)"></div>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top:1vh">
      <RadarChart
        :radarChartData="chartData"
        :radarChartName="chartName"
        :height="radarHeight"
        :width="'100%'"
      />
    </el-row>
  </el-row>
</template>

<script>
  import RadarChart from '@c/RadarChart'
  export default {
    name: "Radar",
    components: {
      RadarChart
    },
    filters: {
      parseToTenThousand(val) {
        if (val > 10000) {
          return val / 10000
        } else {
          return val
        }
      }
    },
    data() {
      return {
        chartData: [],
        chartName: [],
        total: '',
        online: '',
        radarWidth: '',
        radarHeight: ''
      }
    },
    created() {
      this.$bus.$off('provinceChangedOn')
      this.$bus.$on('provinceChangedOn', this.getProbes)
    },
    mounted() {
      this.getWidthAndHeight()
    },
    methods: {
      getWidthAndHeight() {
        this.radarHeight =  this.$refs.radarWrap.$el.offsetHeight - 240 + 'px'
      },
      getProbes(code){
        window._api.apiProbes({ code }).then(res => {
          if (res.state === 'ok') {
            this.total = res.total
            this.online = res.online
            let keys = Object.keys(res.types)
            this.chartData = []
            this.chartName = []
            keys.map(item => {
              this.chartName.push(item)
              this.chartData.push(res.types[item])
            })
          } else {
            this.$message.warning('数据异常')
          }
        })
      }
    }
  }
</script>

<style scoped>
.radarWrap{
  height: 60vh;
  background: rgba(0,33,135,0.24);
  border: 1px solid rgba(14,101,187,0.66);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  padding: 8px 18px;
}
.radarHeader{
  margin: 8px 0 10px 0;
  height: 18px;
}
.title{
  color: #ffffff;
  font-family: Microsoft Sans Serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 18px;
  text-align: left;
  padding-left: 5px;
}
.onlineTitle{
  height: 32px;
  line-height: 32px;
  text-align: center;
  padding: 0 18px;
  font-size: 16px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: #ffffff;
  background-image: linear-gradient(to bottom, rgba(14,101,187, 0.8) 0%, rgba(0,0,0,0) 35%,rgba(0, 0, 0, 0) 65%, rgba(14,101,187, 0.8) 100%);
}
.onlineNum{
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0 20px;
  font-size: 16px;
  color: #ffffff;
}
.num{
  color: rgb(27, 136, 244);
  font-size: 24px;
  padding-right: 20px;
}
</style>
